<template>
  <el-table-column :label="coloumnHeader.label" align="center">
    <template v-for="item in coloumnHeader.children">
      <child-columns
        v-if="item.children && item.children.length"
        :key="item.id"
        :coloumn-header="item"
      ></child-columns>
      <el-table-column v-else :key="item.id" :label="item.label" :prop="item.fullLabel" align="center" >
        <template slot-scope="scope">
          <span v-if="!scope.row.edit">
            <span>{{scope.row[item.fullLabel]}}</span>
          </span>
          <template v-else>
            <!--文本-->
            <el-input placeholder="请输入" v-model="scope.row[item.fullLabel]" v-if="item.dataType === 'text'"/>
            <!--日期-->
            <el-date-picker clearable size="small" style="width: 130px" v-model="scope.row[item.fullLabel]" type="date" value-format="yyyy-MM-dd" :default-value="new Date()"
                            placeholder="请选择" v-if="item.dataType === 'date'">
            </el-date-picker>
            <!--选项-->
            <el-select  placeholder="请选择" v-model="scope.row[item.fullLabel]" v-if="item.dataType === 'select'">
              <el-option
                v-for="l in item.dataOptions.split(',')"
                :key="l"
                :label="l"
                :value="l"
              />
            </el-select>
          </template>
        </template>

      </el-table-column>
    </template>
  </el-table-column>
</template>

<script>
  export default {
    name: "childColumns",
    props: {
      coloumnHeader: {
        type: Object,
        required: true,
      },
    },
  };
</script>

<style scoped>

</style>
